<template>
  <div class="orderStrip">
    <!-- 进度 -->
    <div class="progress">
      <van-steps :active="info.status">
        <van-step>买家下单</van-step>
        <van-step>商家接单</van-step>
        <van-step>线下交易</van-step>
        <van-step>交易完成</van-step>
      </van-steps>
    </div>
    <!-- 商品内容 -->
    <goodBrief v-for="(item, index) in goods" :key="index" :pieceData="item" />
    <p style="color: orange;text-align:center" @click="showDetail = !showDetail">
      <van-icon :name="showDetail ? 'arrow-up' : 'arrow-down'" />显示订单详情
    </p>
    <!-- 订单信息 -->
    <div class="card" v-if="showDetail">
      <van-cell-group>
        <van-cell title="订单编号" :value="info.orderID" />
        <van-cell title="创建时间" :value="info.create_time" />
        <van-cell title="收件人" :value="address.name" />
        <van-cell title="收件地址" :value="address.address" />
        <van-cell title="手机号" :value="address.phone" />
      </van-cell-group>
    </div>
    <p v-if="userID === info.sellerID">
      <!-- -1取消订单0下单1接单2签收 -->
      <span style="display:flex;justify-content:space-between">
        <van-button type="info" @click="handleChatBuyer" plain>联系买家</van-button>
        <van-button v-if="this.info.status !== -1" type="info" @click="takeOrder()" :disabled="info.status !== 0">确认接单
        </van-button>
        <van-button v-if="this.info.status === -1" type="default" disabled>订单已取消</van-button>
        <van-button v-else type="default" @click="cancelOrder()" :disabled="info.status === 4">取消订单</van-button>
      </span>
    </p>
    <p v-else>
      <span style="display:flex;justify-content:space-between">
        <van-button type="info" @click="handleChatSeller" plain>联系卖家</van-button>
        <van-button v-if="this.info.status !== -1" type="info" @click="takeSignBuyer()" :disabled="info.status > 2">确认签收
        </van-button>
        <van-button v-if="this.info.status === -1" type="default" disabled>订单已取消</van-button>
        <van-button v-else type="default" @click="cancelOrder()" :disabled="info.status === 4">取消订单</van-button>
      </span>
    </p>
  </div>
</template>

<script>
import { Step, Steps, Toast } from "vant";
import { timestampToTime } from "@/utils/timeStamp";
import goodBrief from "@/components/orderStrip/goodsBrief";
export default {
  props: ["pieceData", "userID"],
  components: {
    goodBrief,
    [Step.name]: Step,
    [Steps.name]: Steps,
  },
  data() {
    return {
      info: this.pieceData,
      goods: [],
      showDetail: false,
      address: {
        name: "张三",
        address: "4#413",
        phone: "12345678910"
      },
      buyer: {}
    };
  },
  created() {
    this.$axios
      .get(`/getMomentByID?momentID=${this.info.momentID}`)
      .then((res) => {
        if (res.code === 200) {
          this.goods = res.data;
        }
      });
    this.$axios.get(`/getAddressByID?addressID=${this.info.addressID}`).then(res => {
      if (res.code === 200) {
        Object.assign(this.address, res.data[0])
      }
    })
    this.info.create_time = timestampToTime(this.info.create_time);
  },
  methods: {
    // 买家确认接单
    takeOrder() {
      this.$axios.post('/takeOrder', { orderID: this.info.orderID }).then(res => {
        if (res.code === 200) this.$set(this.info, "status", 1)
      })
    },
    // 卖家确认签收
    takeSignSeller() {
      this.$axios.post('/takeSignSeller', { orderID: this.info.orderID }).then(res => {
        if (res.code === 200) this.$set(this.info, "status", 2)
      })
    },
    // 买家确认签收
    takeSignBuyer() {
      this.$axios.post('/takeSignBuyer', { orderID: this.info.orderID }).then(res => {
        if (res.code === 200) this.$set(this.info, "status", 4)
      })
    },
    // 取消订单
    cancelOrder() {
      this.$axios.post('/cancelOrder', { orderID: this.info.orderID })
      this.$axios.post("/unlockMoment", { momentID: [this.info.momentID] }).then(res => {
        if (res.code === 200) {
          this.$set(this.info, "status", -1)
        } else {
          Toast("出了点问题")
        }
      })
    },
    // 联系卖家
    handleChatSeller() {
      this.$store.commit('SET_CHAT_USER', { userID: this.goods[0].userID, avator: this.goods[0].avator, nickname: this.goods[0].nickname, historyList: [] })
      this.$router.push({
        path: "/chatroom",
        query: { 'userID': this.goods[0].userID, 'name': this.goods[0].nickname, 'avator': this.goods[0].avator },
      });
    },
    // 联系买家
    handleChatBuyer() {
      this.$axios.get(`/getUser?userID=${this.info.buyerID}`).then(res => {
        if (res.code = 200) {
          this.buyer = res.data
          this.$store.commit('SET_CHAT_USER', { userID: this.buyer.userID, avator: this.buyer.avator, nickname: this.buyer.nickname, historyList: [] })
          this.$router.push({
            path: "/chatroom",
            query: { 'userID': this.buyer.userID, 'name': this.buyer.nickname, 'avator': this.buyer.avator },
          });
        }
      })
    }
  }
};
</script>

<style scoped>
.orderStrip {
  width: 90vw;
  border-radius: 5px;
  background-color: #fafafa;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  margin: 5px auto;
  padding: 5px;
  text-align: left;
}

.orderStrip>div {
  background-color: #fafafa;
}

.van-steps,
.van-cell-group,
.van-cell {
  background-color: transparent;
}

.card {
  text-align: left;
}
</style>